{% extends "adminlte/common_list.html" %}
{% load static %}

{% block content_title %}
    站内信
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li>
            <a href="/">
                <i class="fa fa-dashboard"></i> {{ default_dashboard_title }}
            </a>
        </li>
        {% if page_title != default_dashboard_title %}
            <li class="active">
                <a href="{% url 'adminlte:common_list_page' page_app_name 'sitemailreceive' %}">
                    站内信
                </a>
            </li>
        {% endif %}
    </ol>
{% endblock %}

{% block content %}
    <div class="row" id="siteMailContentRow">
        <div class="col-md-3">
            <a href="javascript:void(0);" v-on:click="newMail"
               class="btn btn-primary btn-block margin-bottom">
                <i class="fa fa-pencil"></i> 写信</a>

            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">文件夹</h3>

                    <div class="box-tools">
                        <button class="btn btn-box-tool"
                                data-widget="collapse"><i
                                class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body no-padding">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active">
                            <a href="javascript:void(0);" v-on:click="inBox">
                                <i class="fa fa-inbox"></i> 收件箱
                                <span v-if="unReadItemsCount > 0"
                                      class="label label-primary pull-right">
                                    #[unReadItemsCount]
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" v-on:click="sendBox">
                                <i class="fa fa-envelope-o"></i> 发件箱
                            </a>
                        </li>
                        {#                        <li>#}
                        {#                            <a href="#">#}
                        {#                                <i class="fa fa-file-text-o"></i> 草稿箱#}
                        {#                            </a>#}
                        {#                        </li>#}
                        {#                        <li>#}
                        {#                            <a href="javascript:void(0);" v-on:click="trashBox">#}
                        {#                                <i class="fa fa-trash-o"></i> 垃圾箱#}
                        {#                            </a>#}
                        {#                        </li>#}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="box">
                    <div class="box-header">
                        <div class="row">
                            <div class="col-xs-12 col-sm-8">
                                {% comment %}<button class="btn btn-primary"
                                        v-on:click="allStatus">
                                    全部
                                </button>
                                <button class="btn btn-link"
                                        v-on:click="unReadStatus">
                                    未读
                                </button>
                                <button class="btn btn-link"
                                        v-on:click="readStatus">
                                    已读
                                </button>
                                <button class="btn btn-link"
                                        v-on:click="markAllRead">
                                    标记为已读
                                </button>{% endcomment %}
                                <div class="checkbox pull-left btn-link"
                                     style="margin-top: 7px; margin-right: 12px;">
                                    <label>
                                        <input type="checkbox"
                                               name="checkboxAllRow"
                                               v-on:click="toggleAllBox"/> 全选
                                    </label>
                                </div>
                                <button class="btn btn-link"
                                        v-on:click="removeSelected">
                                    <i class="fa fa-trash-o"></i>
                                    删除
                                </button>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="input-group">
                                    <input type="text" name="search"
                                           id="tableSearch"
                                           class="form-control input-sm pull-right"
                                           style="width: 150px;"
                                           placeholder="邮件标题关键字"
                                           v-on:keypress.13="search">

                                    <div class="input-group-btn">
                                        <button class="btn btn-sm btn-default"
                                                v-on:click="resetSearch">
                                            <i class="fa fa-times-circle"></i>
                                        </button>
                                        <button class="btn btn-sm btn-default"
                                                v-on:click="search">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover" id="commonTable">
                            <tbody>
                                <template v-for="item in items">
                                    <tr>
                                        <td style="width:40px;text-align:center">
                                            <input type="checkbox"
                                                   class="minimal"
                                                   name="checkboxRow"
                                                   value="#[item.id]"/>
                                        </td>
                                        {% for field in table_fields %}
                                            {% if field == 'id' %}
                                                <td>
                                                    <a href="javascript:void(0);"
                                                       data-pk="#[item.id]"
                                                       v-on:click="detail">
                                                        详情
                                                    </a> |
                                                    <a href="javascript:void(0);"
                                                       data-pk="#[item.id]"
                                                       v-on:click="removeOne">
                                                        删除
                                                    </a>
                                                </td>
                                            {% else %}
                                                <td>
                                                    {!! item.{{ field }} !!}
                                                </td>
                                            {% endif %}
                                        {% endfor %}
                                    </tr>
                                </template>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    {% block common_list_pagination %}
                        <div class="box-footer clearfix">
                            {% include 'adminlte/common_list_pagination.html' %}
                        </div>
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block base_foot_page_script %}
    <script src="{% static 'adminlte/js/common-list-page-base.js' %}"
            type="text/javascript"></script>
    <script src="{% static 'messageset/js/sitemail-list-page.js' %}"
            type="text/javascript"></script>
{% endblock %}